<jsp:directive.page contentType="text/html;charset=UTF-8" />

<div class="tabbable">
	<ul class="nav nav-tabs">
		<li class="active"><a href="javascript:#taskTrackerList"
			data-toggle="tab">业务系统列表</a></li>
		<li><a href="javascript:#log" data-toggle="tab">业务系统连接日志</a></li>
		<li><a href="javascript:#jobTrackerList" data-toggle="tab">调度服务器列表</a></li>
		<li><a href="javascript:#blacklist" data-toggle="tab">ubarrier黑名单</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="taskTrackerList">
			<table class="table table-hover table-striped table-bordered"
				border="1" style="width: 100%;">
				<thead>
					<tr>
						<td colspan="7" align="center">已注册的业务系统列表</td>
					</tr>
					<tr>
						<td width="50px;" align="center">No.</td>
						<td>UUID</td>
						<td>IP地址</td>
						<td>主机名</td>
						<td>任务组</td>
						<td width="180px;">节点注册时间</td>
						<td width="180px;">最后一次心跳时间</td>
						<td width="80px;">操作</td>
					</tr>
				</thead>
				<tbody>
					<tr data-ng-repeat="item in taskTrackers">
						<td align="center" data-ng-bind="$index + 1"></td>
						<td data-ng-bind="item.taskTrackerUuid"></td>
						<td data-ng-bind="item.ip"></td>
						<td data-ng-bind="item.hostname"></td>
						<td data-ng-bind="item.taskGroup"></td>
						<td data-ng-bind="item.registerTime | date :'yyyy-MM-dd HH:mm:ss'"></td>
						<td
							data-ng-bind="item.heartbeatTime | date :'yyyy-MM-dd HH:mm:ss'"></td>
						<td>
							<button type="button" class="btn btn-primary btn-xs" data-ng-click="clearCache($event,item.taskTrackerUuid)">清理缓存</button>
						</td>
							
					</tr>
				</tbody>
			</table>
		</div>
		<div id="log" class="tab-pane">
			<table class="table table-hover table-striped table-bordered"
				border="1" style="width: 100%">
				<thead>
					<tr>
						<td colspan="5" align="right"><input type="button"
							value="查询" data-ng-click="logpager.reload()"></td>
					</tr>
					<tr>
						<td width="50px;" align="center">No.</td>
						<td>时间</td>
						<td>任务运行UUID</td>
						<td>日志类型</td>
						<td width="80px;">日志内容</td>
					</tr>
				</thead>
				<tbody>
					<tr data-ng-repeat="item in logpager.items">
						<td align="center" data-ng-bind="$index + 1"></td>
						<td data-ng-bind="item.logTime | date :'yyyy-MM-dd HH:mm:ss'"></td>
						<td data-ng-bind="item.taskTrackerUuid"></td>
						<td data-ng-bind="item.logType"></td>
						<td>
							<button type="button" class="btn btn-primary btn-xs"
								data-toggle="modal" data-target="#ttLogDetail"
								data-whatever="{{$index}}">详情</button>
						</td>
					</tr>
				</tbody>
			</table>
			<pager pager-item="logpager" />
		</div>
		<div class="tab-pane" id="jobTrackerList">
			<div class="panel-group" role="tablist" style="margin-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading" role="tab"
						id="collapseListGroupHeading1"
						style="padding-top: 5px; padding-bottom: 5px;">
						<table style="width: 100%; height: 100%">
							<tr>
								<td width="30%"></td>
								<td align="center">
									<h4 class="panel-title">已在Zookeeper注册的调度服务器信息</h4>
								</td>
								<td width="30%" align="right">
									<button type="button" class="btn btn-primary btn-sm"
										data-ng-click="queryJobTrackerNodes()">刷新</button> <!-- a
									class="collapsed btn btn-success btn-sm" title="显示/隐藏查询条件"
									role="button" data-toggle="collapse"
									href="javascript:#collapseListGroup1" aria-expanded="false"
									aria-controls="collapseListGroup1"> <span
										class="glyphicon glyphicon-filter" aria-hidden="true"></span>
								</a -->
								</td>
							</tr>
						</table>
					</div>
					<div id="collapseListGroup1" class="panel-collapse collapse"
						role="tabpanel" aria-labelledby="collapseListGroupHeading1"
						aria-expanded="false" style="height: 0px;">
						<ul class="list-group">
							<li class="list-group-item"
								style="padding-top: 5px; padding-bottom: 5px;">
								<div class="row">
									<div class="col-lg-12">
										
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<table class="table table-hover table-striped table-bordered"
				border="1" style="width: 100%;">
				<thead>
					<tr>
						<td width="50px;" align="center">No.</td>
						<td>Path</td>
						<td>Host And Port</td>
					</tr>
				</thead>
				<tbody>
					<tr data-ng-repeat="item in jobTrackerNodes">
						<td align="center" data-ng-bind="$index + 1"></td>
						<td data-ng-bind="item.zkPath"></td>
						<td data-ng-bind="item.hostAndPort"></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="tab-pane" id="blacklist">
			<div class="panel-group" role="tablist" style="margin-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading" role="tab"
						 id="collapseListGroupHeading1"
						 style="padding-top: 5px; padding-bottom: 5px;">
						<table style="width: 100%; height: 100%">
							<tr>
								<td width="30%"></td>
								<td align="center">
									<h4 class="panel-title">设置为黑名单的IP地址</h4>
								</td>
								<td width="30%" align="right">
									<button type="button" class="btn btn-primary btn-sm"
											data-ng-click="queryblackList()">刷新</button>
								</td>
							</tr>
						</table>
					</div>
					<div id="collapseListGroup1" class="panel-collapse collapse"
						 role="tabpanel" aria-labelledby="collapseListGroupHeading1"
						 aria-expanded="false" style="height: 0px;">
						<ul class="list-group">
							<li class="list-group-item"
								style="padding-top: 5px; padding-bottom: 5px;">
								<div class="row">
									<div class="col-lg-12">

									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<button type="button" class="btn btn-default" style="margin: 5px 5px 5px 5px;" data-ng-repeat="item in blackList">{{item}}</button>
		</div>
	</div>
</div>

<div class="modal fade" id="ttLogDetail" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="exampleModalLabel">Detail</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<input type="text" class="form-control" id="recipient-name"
							readonly="readonly" width="100%">
					</div>
					<div class="form-group">
						<label for="message-text" class="control-label">Message:</label>
						<textarea class="form-control" id="message-text" rows="15"
							readonly="readonly"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
